<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.blurry"
          clearable
          size="small"
          placeholder="请输入数据源名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation />
      </div>
    </div>
    <!--表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="700px"
    >
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        size="small"
        label-width="120px"
      >
        <el-form-item
          :rules="[{ required: true, message: '请输入数据源名称', trigger: 'blur' }]"
          label="数据源名称"
          prop="name"
        >
          <el-input v-model="form.name" placeholder="请输入数据源名称" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入数据源编码', trigger: 'blur' }]"
          label="数据源编码"
          prop="code"
        >
          <el-input v-model="form.code" placeholder="请输入数据源编码" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请选择数据库类型', trigger: 'blur' }]"
          label="数据库类型"
          prop="type"
        >
          <el-select
            v-model="form.type"
            clearable
            placeholder="请选择数据库类型"
            style="width: 400px;"
          >
            <el-option
              :key="1"
              label="Oracle"
              :value="1"
            />
            <el-option
              :key="2"
              label="Mysql"
              :value="2"
            />
            <el-option
              :key="3"
              label="SqlServer"
              :value="3"
            />
            <el-option
              :key="4"
              label="OpenGauss"
              :value="4"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入数据库地址', trigger: 'blur' }]"
          label="数据库地址"
          prop="url"
        >
          <el-input v-model="form.url" placeholder="请输入数据库地址" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入端口号', trigger: 'blur' }]"
          label="端口号"
          prop="port"
        >
          <el-input v-model="form.port" placeholder="请输入端口号" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入数据库账号', trigger: 'blur' }]"
          label="数据库账号"
          prop="username"
        >
          <el-input v-model="form.username" placeholder="请输入数据库账号" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入数据库密码', trigger: 'blur' }]"
          label="数据库密码"
          prop="password"
        >
          <el-input v-model="form.password" placeholder="请输入数据库密码" />
        </el-form-item>
        <el-form-item
          v-if="form.type === 1"
          :rules="[{ required: true, message: '请选择链接方式', trigger: 'blur' }]"
          label="链接方式"
          prop="linkType"
        >
          <el-select
            v-model="form.linkType"
            clearable
            placeholder="请选择链接方式"
            style="width: 400px;"
          >
            <el-option
              label="SID"
              :value="1"
            />
            <el-option
              label="ServerName"
              :value="2"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.type === 2|| form.type === 4"
          :rules="[{ required: true, message: '请输入数据库名称', trigger: 'blur' }]"
          label="数据库名称"
          prop="datasource"
        >
          <el-input v-model="form.datasource" style="width: 400px" placeholder="数据库名称" />
        </el-form-item>
        <el-form-item
          v-if="form.type === 1"
          :rules="[{ required: true, message: '请输入sid/服务名称', trigger: 'blur' }]"
          label="sid/服务名"
          prop="datasource"
        >
          <el-input v-model="form.datasource" style="width: 400px" placeholder="请输入sid/服务名称" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group
            v-model="form.isEnable"
          >
            <el-radio
              v-for="item in enable"
              :key="item.id"
              :label="item.value"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="crud.submitCU"
        >确认</el-button>
      </div>
    </el-dialog>
    <!--页面数据-->
    <div class="custom-body">
      <div
        v-for="(item,index) in crud.data"
        :key="'data-'+index"
        class="custom-ul-li"
      >
        <div class="custom-ul-li-body">
          <div class="custom-ul-image">
            <el-image v-if="item.type === 1" :src="oracle" />
            <el-image v-if="item.type === 2" :src="mysql" />
            <el-image v-if="item.type === 4" :src="openGauss" />
          </div>
          <div class="custom-ul-right">
            <div class="custom-ul-title title">{{ item.name }}</div>
            <div class="custom-ul-title db">编码：{{ item.code }}</div>
            <div class="custom-ul-button ">
              <el-button type="text" @click="crud.toEdit(item)">编辑</el-button>
              <el-button type="text" @click="crud.doDelete(item)">删除</el-button>
            </div>
          </div>
          <div class="custom-state">
            <div v-if="item.isEnable" class="state-content start">启用</div>
            <div v-else class="state-content stop">禁用</div>
          </div>
        </div>
      </div>
      <div class="custom-ul-li">
        <div class="custom-ul-li-body add" @click="crud.toAdd">
          <div class="custom-ul-icon">
            <div class="custom-ul-icon-icon">
              <i class="el-icon-plus" />
            </div>
            <div class="custom-ul-add">添加</div>
          </div>
        </div>
      </div>
    </div>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@/components/Crud/customCrud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/PaginationCustom.vue'
import oracle from '@/assets/images/oracle.png'
import mysql from '@/assets/images/mysql.png'
import openGauss from '@/assets/images/opengauss.png'
const defaultForm = {
  id: null,
  name: null,
  type: null,
  url: null,
  code: null,
  port: null,
  username: null,
  password: null,
  linkType: null,
  datasource: null,
  isEnable: 'true'
}
export default {
  name: 'DataSource',
  components: { rrOperation, pagination },
  cruds() {
    return CRUD({
      title: '数据源管理',
      url: '/rest/api/manager/portal/v1/datasource/manager',
      props: {
        searchToggle: true
      }
    })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      oracle: oracle,
      mysql: mysql,
      openGauss: openGauss,
      enable: [{
        id: 'k-1',
        label: '启用',
        value: true
      }, {
        id: 'k-2',
        label: '禁用',
        value: false
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .custom-body {
    width: 100%;
    min-height: 500px;
    .custom-ul-li {
      width: 305px;
      height: 130px;
      border-radius: 4px;
      padding: 10px;
      box-sizing: border-box;
      float: left;
      .custom-ul-li-body {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        position: relative;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        .custom-ul-icon {
          width: 100%;
          height: 60px;
          margin-top: 16px;
          color: #409eff;
          .custom-ul-icon-icon {
            width: 100%;
            height: 40px;
            text-align: center;
            font-size: 32px;
          }
          .custom-ul-add {
            width: 100%;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 14px;
          }
        }
        .custom-ul-image {
          width: 80px;
          height: 100%;
          text-align: center;
          .el-image {
            width: 46px;
            margin-top: 24px;
          }
        }
        .custom-ul-right {
          width: 205px;
          height: 100%;
          .custom-ul-title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
          }
          .custom-ul-title.title {
            font-weight: 500;
            margin: 0;
            text-align: left;
          }
          .custom-ul-title.db {
            color: #909399;
          }
          .custom-ul-button {
            width: 100%;
            height: 20px;
            line-height: 35px;
            text-align: right;
          }
        }
        .custom-state {
          position: absolute;
          top: 0;
          right: 0;
          width: 40px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 14px;
          .state-content {
            width: 100%;
            height: 100%;
            position: relative;
          }
          .state-content.start:before {
            content: '';
            width: 10px;
            height: 10px;
            position: absolute;
            top: 10px;
            left: -5px;
            background-color: #67C23A;
            border-radius: 5px;
          }
          .state-content.stop:before {
            content: '';
            width: 10px;
            height: 10px;
            position: absolute;
            top: 10px;
            left: -5px;
            background-color: #F56C6C;
            border-radius: 5px;
          }
        }
      }
      .custom-ul-li-body.add {
        border: 1px dashed #4AB7BD;
      }
    }
  }
}
</style>
